<template>
    <div>
        <el-button type="primary" @click="pay">支付</el-button>
        <el-button type="primary" @click="weiPay">微信支付</el-button>
        <el-dialog
                title="收银台"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <div style="text-align: center">
                <p>微信支付 {{payResult.price}}元</p>
                <div style="border: 1px solid #f3f3f3;width: 320px;padding: 10px;margin: 0px auto">
                    <vue-qr
                            :text="payResult.url"
                            >
                    </vue-qr>

                </div>
            </div>
            <el-divider></el-divider>
            <div style="font-size: 13px">
                提示:<br>
                支付成功前请勿手动关闭页面<br>
                二维码两小时内有效,请及时扫码支付<br>
            </div>


        </el-dialog>
        <div id="hello"></div>
    </div>
</template>

<script>
    import vueQr from "vue-qr"
    export default {
        name: "Wx",
        components:{
            vueQr
        },
        data(){
            return {
                payResult:{},
                orderNo:"e334ce2a6b1d4bc6969",
                dialogVisible:false,
                timer1:"",
                orderId:"",
                codeurl:""
            }
        },
        created() {
            this.pay();
        },
        methods:{
            //查询订单状态
            queryPayStatus(orderNo){
                this.$http.get("/order/pay//status/"+this.orderId).then(resp=>{
                        console.log(resp.data.data)
                        if(resp.data.data.msg==="支付成功"){
                            //消除定时器
                            clearInterval(this.timer1)
                            this.timer1=null;
                            this.$message.success("支付成功");
                            this.dialogVisible=false;
                        }
                })
            },
             pay(){

                this.dialogVisible=true
                 this.orderId="mI5ZmcWz3dVPJGQgQQ11111"
                  this.$http.get("/order/pay/qr/"+this.orderId).then(resp=>{
                      console.log(resp.data.data)
                      if (resp.data.code===2000){
                          this.payResult.url=resp.data.data.url;
                          this.payResult.price=resp.data.data.price
                      }


                      //设置一个定时任务，每隔3秒调用一次
                      this.timer1 = setInterval(() => {

                          this.queryPayStatus(this.payResult.orderNo)
                      }, 3000);
                  })
             },

            weiQueryPayStatus(orderid){
                this.orderId="2czkYLgIbAOqOebWmSa"
                this.$http.get("http://localhost:8999/order/weixin/queryPayState/"+orderid).then(resp=>{
                    if(resp.data.code===200){
                        //消除定时器
                        clearInterval(this.timer1)
                        this.timer1=null;
                        this.$message.success("支付成功");
                        this.dialogVisible=false;
                    }
                })
            },
            weiPay(){
                this.dialogVisible=true;
                this.orderId="2czkYLgIbAOqOebWmSa"
                this.$http.get("http://localhost:8999/order/weixin/createNative/"+this.orderId).then(resp=>{
                    console.log(resp.data.data)
                    this.payResult=resp.data.data;
                    if (resp.data.msg==="Success"){
                        $("#hello").html(resp.data)
                    }
                    //设置一个定时任务，每隔3秒调用一次
                    this.timer1 = setInterval(() => {
                        this.weiQueryPayStatus(this.payResult.orderId)
                    }, 3000);
                })
            }
        }
    }
</script>

<style scoped>

</style>